<template>
  <div class="container">
    <topTitle
      :titleText="titleText"
      @gobackTriser="goBack"
      :back="back"
    ></topTitle>
    <div class="mainCon">
      <div style="padding: 24px; padding-top: 16px">
        <el-row>
          <el-col :span="24">
            <div class="patrolTitle">巡查情况</div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" class="subTitleBox">
            <div class="secondaryTitle secondaryTitleTheme">巡查企业信息</div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12" class="leftShow">
            <span class="labelWidth">单位名称：</span>
            <span class="information">
              <el-input :disabled="true"></el-input>
            </span>
          </el-col>
          <el-col :span="12" class="leftShow">
            <span class="labelWidth">所属行业：</span>
            <span class="information">
              <el-input :disabled="true"></el-input>
            </span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12" class="leftShow">
            <span class="labelWidth">法人代表：</span>
            <span class="information">
              <el-input :disabled="true"></el-input>
            </span>
          </el-col>
          <el-col :span="12" class="leftShow">
            <span class="labelWidth">联系电话：</span>
            <span class="information">
              <el-input :disabled="true"></el-input>
            </span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12" class="leftShow">
            <span class="labelWidth">组织机构代码：</span>
            <span class="information">
              <el-input :disabled="true"></el-input>
            </span>
          </el-col>
          <el-col :span="12" class="leftShow">
            <span class="labelWidth">工商登记执照号码：</span>
            <span class="information">
              <el-input :disabled="true"></el-input>
            </span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12" class="leftShow">
            <span class="labelWidth">单位地址：</span>
            <span class="information">
              <el-input :disabled="true"></el-input>
            </span>
          </el-col>
          <el-col :span="12" class="leftShow">
            <span class="labelWidth">联系方式：</span>
            <span class="information">
              <el-input :disabled="true"></el-input>
            </span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12" class="leftShow">
            <span class="labelWidth">劳资负责人：</span>
            <span class="information">
              <el-input :disabled="true"></el-input>
            </span>
          </el-col>
          <el-col :span="12" class="leftShow">
            <span class="labelWidth">联系电话：</span>
            <span class="information">
              <el-input :disabled="true"></el-input>
            </span>
          </el-col>
        </el-row>
      </div>
      <div class="spacing"></div>
      <div style="padding: 24px; padding-top: 0">
        <el-row>
          <el-col :span="24" class="subTitleBox">
            <div class="secondaryTitle secondaryTitleTheme">巡查登记</div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12" class="leftShow">
            <span class="labelWidth">巡查日期：</span>
            <span class="information">
              <el-input :disabled="true"></el-input>
            </span>
          </el-col>
          <el-col :span="12" class="leftShow">
            <span class="labelWidth">巡查人员：</span>
            <span class="information">
              <el-input :disabled="true"></el-input>
            </span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" class="leftShow">
            <span class="labelWidth">巡查内容：</span>
            <span style="margin-left: 200px; display: block">
              <el-table
                :data="tableData"
                :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
                highlight-current-row
                stripe
                style="border: 1px solid #dfe6ec"
              >
                <el-table-column
                  align="left"
                  prop="typeName"
                  label="事项类型"
                ></el-table-column>
                <el-table-column
                  align="left"
                  prop="itemName"
                  label="巡查项"
                ></el-table-column>
                <el-table-column
                  align="left"
                  prop="resultType"
                  label="巡查结果"
                >
                  <template slot-scope="scope">
                    <div>
                      <template v-if="scope.row.resultType == 'TEXT'">
                        <el-input
                          placeholder="请输入文本"
                          class="inputWidth"
                        ></el-input>
                      </template>
                      <template
                        v-else-if="scope.row.resultType == 'SINGLE_CHOOSE'"
                      >
                        <el-radio-group>
                          <el-radio
                            :label="item"
                            v-for="(item, index) of scope.row.value"
                            :key="index"
                          ></el-radio>
                        </el-radio-group>
                      </template>
                      <template
                        v-else-if="scope.row.resultType == 'MULTIPLE_CHOOSE'"
                      >
                        <el-checkbox-group :disabled="true">
                          <el-checkbox
                            :label="item"
                            v-for="(item, index) of scope.row.value"
                            :key="index"
                            >{{ item }}</el-checkbox
                          >
                        </el-checkbox-group>
                      </template>
                      <template v-if="scope.row.resultType == 'POPULATION'">
                        <el-input
                          :disabled="true"
                          placeholder="请输入人数"
                          class="inputWidth"
                        ></el-input
                        >&nbsp;人
                      </template>
                      <template v-if="scope.row.resultType == 'PERCENTAGE'">
                        <el-input
                          :disabled="true"
                          placeholder="请输入比例数"
                          class="inputWidth"
                        ></el-input
                        >&nbsp;%
                      </template>
                      <template v-if="scope.row.resultType == 'MONEY'">
                        <el-input
                          :disabled="true"
                          placeholder="请输入金额"
                          class="inputWidth"
                        ></el-input
                        >&nbsp;元
                      </template>
                      <template v-if="scope.row.resultType == 'AMOUNT'">
                        <el-input
                          :disabled="true"
                          placeholder="请输入数量"
                          class="inputWidth"
                        ></el-input
                        >&nbsp;个
                      </template>
                      <template v-if="scope.row.resultType == 'DAYS'">
                        <el-input
                          :disabled="true"
                          placeholder="请输入天数"
                          class="inputWidth"
                        ></el-input
                        >&nbsp;天
                      </template>
                      <template v-if="scope.row.resultType == 'HOURS'">
                        <el-input
                          :disabled="true"
                          placeholder="请输入小时数"
                          class="inputWidth"
                        ></el-input
                        >&nbsp;小时
                      </template>
                      <template v-else-if="scope.row.resultType == 'DATE'">
                        <el-date-picker
                          type="date"
                          placeholder="请选择日期"
                          class="inputWidth"
                          value-format="yyyy-MM-dd"
                        ></el-date-picker>
                      </template>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column align="left" label="凭证上传" width="200">
                  <template slot-scope="scope">
                    <!-- <el-button class="uploadImg">上传</el-button> -->
                    <span>上传</span>
                  </template>
                </el-table-column>
              </el-table>
            </span>
          </el-col>
        </el-row>
      </div>
      <div class="spacing"></div>
      <div style="padding: 24px; padding-top: 0">
        <el-row>
          <el-col :span="24" class="subTitleBox">
            <div class="secondaryTitle secondaryTitleTheme">巡查结果</div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12" class="leftShow">
            <span class="labelWidth">巡查结果：</span>
            <span class="information">
              <el-select
                v-model="value"
                placeholder="请选择"
                class="inputWidth"
                clearable
              >
                <el-option label="存在问题，需整改" value="1"></el-option>
                <el-option label="无问题，无需整改" value="0"></el-option>
              </el-select>
            </span>
          </el-col>
          <el-col :span="12" class="leftShow">
            <span class="labelWidth">整改日期：</span>
            <span class="information">
              <el-date-picker
                type="date"
                placeholder="请选择"
                v-model="period"
                class="inputWidth"
                clearable
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" class="leftShow">
            <span class="labelWidth">存在问题：</span>
            <span class="information">
              <el-input
                style="padding-bottom: 40px"
                type="textarea"
                :rows="4"
                :disabled="true"
              ></el-input>
            </span>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'patrolTemplateDetailFj',
  data() {
    return {
      titleText: '非建巡查模板',
      back: true,
      tableData: [],
      value: '',
      period: '',
      page: '',
      templateInfo: [],
    }
  },
  created() {
    this.page = this.$route.query.page
    if (this.page === 'patrolTemplateAdd') {
      this.tableData = this.$route.query.selectItems
    } else {
      this.templateId = this.$route.query.templateId
      this.getTemplate(this.templateId)
    }
  },
  methods: {
    goBack() {
      if (this.page == 'patrolTemplateList') {
        this.$router.push('/home/patrolTemplate/patrolTemplateList')
        this.$store.commit('GOBACK_NAME', {
          oldUrl: '/home/patrolTemplate/patrolTemplateList',
          newUrl: this.$router.currentRoute.fullPath,
        })
      }
      if (this.page == 'patrolTemplateAdd') {
        this.$router.push('/home/patrolTemplate/patrolTemplateAdd')
        this.$store.commit('GOBACK_NAME', {
          oldUrl: '/home/patrolTemplate/patrolTemplateList',
          newUrl: this.$router.currentRoute.fullPath,
        })
      }
    },
    getTemplate(templateId) {
      if (!templateId) {
        return
      }
      this.axios({
        method: 'post',
        url: 'api-gov/ipqc/template/expand/detail',
        data: {
          id: templateId,
        },
      })
        .then((response) => {
          if (!response.data.hasError) {
            this.templateInfo = response.data.result
            this.tableData = response.data.result.ipqcTemplateDetailExpendVOs
          } else {
            this.$message({
              type: 'error',
              message: response.data.errorMsg,
            })
            this.btnChangeEnable = false
          }
        })
        .catch((error) => {})
    },
  },
}
</script>

<style scoped lang="less">
.mainCon {
  height: calc(100% - 67px);
  overflow-y: auto;
  padding-top: 0;
}
.patrolTitle {
  color: #333;
  font: bold 16px Microsoft YaHei;
  height: 35px;
  border-bottom: 1px solid #dee5f4;
}
.subTitleBox {
  padding: 24px;
  padding-left: 0;
}
.blockquote {
  color: #333;
  font: bold 16px Microsoft YaHei;
  height: 35px;
  margin-top: 16px;
}

.blockquote:before {
  background-color: #009588;
  content: '';
  padding: 2px;
  margin-right: 10px;
}
.leftShow {
  text-align: left;
  line-height: 36px;
  .labelWidth {
    font-size: 14px;
    color: #666666;
    display: inline-block;
    height: 36px;
    width: 200px;
    text-align: right;
    float: left;
  }
  .information {
    font-size: 14px;
    color: #151515;
    display: block;
    margin-left: 200px;
    height: 50px;
  }
  .selectWidth {
    width: 100%;
  }
  .uploadImg {
    width: 70px;
    height: 36px;
    color: #009588;
    border: 1px solid #009588;
  }
  .inputWidth {
    width: 65% !important;
  }
}
</style>
